<template>
<view class="shopping-details app-pages">
	<view class="app-background-fixed"></view>
	<view class="cell">
		<view class="cell-item">
			<view class="cell-title">门店：复兴路</view>
			<view class="" style="display: flex;margin-top: 15rpx;">
				<view class="">配送方式</view>
				<view class="radio" style="margin-left: 30rpx;">
					<u-radio-group v-model="value" activeColor="#f74062">
						<view class="radio-group">
							<view class="radio-group-item">
								<u-radio :name="1" label="门店配送"></u-radio>
							</view>
							<view class="radio-group-item">
								<u-radio :name="2" label="门店自提"></u-radio>
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
		</view>
		
		<view class="cell-item">
			<view class="cell-title">自提信息</view>
			<view class="row" style="margin-top: 10rpx;">
				<text class="row-title row-title-lang">门店名称</text>
				<view class="row-content"></view>
			</view>
			<view class="row">
				<text class="row-title row-title-lang">提货地址：</text>
				<view class="row-content">糯米</view>
			</view>
			<view class="row">
				<text class="row-title row-title-lang">提货时间：</text>
				<view class="row-content">2022-06-06 09:00-22:00</view>
			</view>
		</view>
		
		
		<view class="cell-item">
			<view class="cell-shopping" style="display: flex;margin-top: 30rpx;" v-for="item in 2" :key="item">
				<view class="" style="width: 150rpx;height: 150rpx;margin-right: 20rpx;">
					<u--image radius="10rpx" :showLoading="true"
						src="https://p.qqan.com/up/2022-6/16543432412777143.jpg" width="150rpx" height="150rpx">
					</u--image>
				</view>
				<view class="cell-shopping-content">
					<view class="">摩卡咖啡</view>
					<view class="cell-shopping-text">呢绒</view>
					<view class="app-pirce-color">￥30.00</view>
				</view>
			</view>
			<view class="cell-price-all">
				<text>共1件  小计：</text>
				<text class="app-pirce-color">￥30.00</text>
			</view>
		</view>
		
		<view class="cell-item cell-item-price-info">
			<view class="row" >
				<text class="row-title row-title-lang">商品总额</text>
				<view class="row-content">￥30.00</view>
			</view>
			<view class="row" >
				<text class="row-title row-title-lang">实际付款</text>
				<view class="row-content">￥30.00</view>
			</view>
			<view class="row" >
				<text class="row-title row-title-lang">运费</text>
				<view class="row-content">￥30.00</view>
			</view>
			<view class="row" >
				<text class="row-title row-title-lang">优惠</text>
				<view class="row-content app-pirce-color">￥30.00</view>
			</view>
			<view class="row" >
				<text class="row-title row-title-lang">订单备注</text>
				<view class="row-content">
					<input type="text" v-model="input" style="width: 360rpx;" placeholder="您可以再此输入要备注的内容哦！">
				</view>
			</view>
		</view>
		
		<view class="btn app-pages">
			<view class="" style="font-size: 28rpx;">
				<text>应付金额：</text>
				<text class="app-pirce-color">￥66666</text>
			</view>
			<view class="btn-view">
				<view class="submit" @click="handleRouter('/homePages/cashier/index')">提交订单</view>
			</view>
		</view>
	</view>
</view>
</template>
<script>
	export default {
		name:'ShoppingDetails',
		data() {
			return {
				numb: 1,
				value: 1,
				input: '',
				banner: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
			}
		},
		methods: {
			goShopping(){
				uni.reLaunch({
					url:'/pages/shoppingCart/index'
				})
			},
			handleRouter(url) {
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.shopping-details{
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
		.cell-shopping-content{
			font-size: 24rpx;
			flex: 1;
			.cell-shopping-text{
				height: 100rpx;
				display: -webkit-box;
				overflow: hidden;
				white-space: normal !important;
				text-overflow: ellipsis;
				word-wrap: break-word;
				-webkit-line-clamp: 2;  //行数
				-webkit-box-orient: vertical
			}
		}
		.radio-group{
			display: flex;
			.radio-group-item+.radio-group-item{
				margin-left: 50rpx;
			}
		}
		.btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			display: flex;
			align-items: center;
			z-index: 1;
			justify-content: space-between;
			font-size: 28rpx;
			background-color: #FFFFFF;
			border-top: 2rpx solid #f2f2f2;
			padding-bottom: env(safe-area-inset-bottom);
			.btn-view{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.submit{
				padding: 15rpx 35rpx;
				border-radius: 4rpx;
				color: #FFFFFF;
				background-color: #f74062;
			}
		}
		.cell{
			.cell-item {
				margin-top: 20rpx;
				box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.1);
				background-color: #FFFFFF;
				padding: 30rpx 40rpx;
				box-sizing: border-box;
				border-radius: 15rpx;
				.cell-price-all{
					font-size: 24rpx;
					margin-top: 50rpx;
					text-align: right;
				}
				.cell-title {
					padding-bottom: 10rpx;
					box-sizing: border-box;
					font-size: 30rpx;
				}
			}
			.row{
				display: flex;
				font-size: 24rpx;
				&+.row{
					margin-top: 20rpx;
				}
				.row-title{
					font-size: 24rpx;
					color: #666666;
					width: 80rpx;
				}
				.row-title-lang{
					width: 130rpx;
					color: #666666;
				}
				.row-content{
					display: flex;
					align-items: center;
					justify-content: center;
					.row-numb{
						width: 80rpx;
						text-align: center;
					}
				}
			}
			.cell-item-price-info{
				.row{
					justify-content: space-between;
				}
			}
		}
	}
</style>